<template>
    <!-- <div class="title">
        <h2>全国企业分布</h2>
        <p>更新时间:2024-11-30 01:00:00</p>
    </div> -->
    <div id="china" style="width: 60%; height: 500px;"></div>
</template>
<script>
import * as echarts from 'echarts';
import China from '@/json/China.json'
export default {
    data() {

    },
    mounted() {
        this.drawMap()

    },
    methods: {
        drawMap() {
            let myChart = echarts.init(document.getElementById('china'));
            echarts.registerMap('China', China);
            let data = [
                {
                    "name": "北京市",
                    "value": 5446
                },
                {
                    "name": "江苏省",
                    "value": 3923
                },
                {
                    "name": "山东省",
                    "value": 3430
                },
                {
                    "name": "广东省",
                    "value": 2805
                },
                {
                    "name": "河北省",
                    "value": 2424
                },
                {
                    "name": "陕西省",
                    "value": 1830
                },
                {
                    "name": "湖南省",
                    "value": 1674
                },
                {
                    "name": "四川省",
                    "value": 1266
                },
                {
                    "name": "辽宁省",
                    "value": 1232
                },
                {
                    "name": "河南省",
                    "value": 1199
                },
                {
                    "name": "浙江省",
                    "value": 1107
                },
                {
                    "name": "湖北省",
                    "value": 1103
                },
                {
                    "name": "安徽省",
                    "value": 984
                },
                {
                    "name": "海南省",
                    "value": 937
                },
                {
                    "name": "福建省",
                    "value": 908
                },
                {
                    "name": "山西省",
                    "value": 761
                },
                {
                    "name": "广西壮族自治区",
                    "value": 755
                },
                {
                    "name": "上海市",
                    "value": 650
                },
                {
                    "name": "重庆市",
                    "value": 647
                },
                {
                    "name": "云南省",
                    "value": 613
                },
                {
                    "name": "新疆维吾尔自治区",
                    "value": 588
                },
                {
                    "name": "天津市",
                    "value": 574
                },
                {
                    "name": "内蒙古自治区",
                    "value": 474
                },
                {
                    "name": "吉林省",
                    "value": 471
                },
                {
                    "name": "甘肃省",
                    "value": 465
                },
                {
                    "name": "黑龙江省",
                    "value": 422
                },
                {
                    "name": "贵州省",
                    "value": 354
                },
                {
                    "name": "江西省",
                    "value": 323
                },
                {
                    "name": "青海省",
                    "value": 166
                },
                {
                    "name": "西藏自治区",
                    "value": 116
                },
                {
                    "name": "宁夏回族自治区",
                    "value": 107
                }

            ];//data中的数据需要后端返回 暂时前端写死
            let value = data.map(item => item.value);
            var maxValue = Math.max(...value);
            var minValue = Math.min(...value);
            var option = {
                visualMap: {
                    orient: 'horizontal', // 设置为横向排列
                    show: false,
                    left: 'center',
                    bottom: 20,
                    //调用接口根据接口的数据确定最大值和最小值和颜色
                    min: minValue,
                    max: maxValue,
                    pieces: [
                        { min: maxValue * 0.8, max: maxValue },
                        { min: maxValue * 0.7, max: maxValue * 0.8 },
                        { min: maxValue * 0.6, max: maxValue * 0.7 },
                        { min: maxValue * 0.5, max: maxValue * 0.6 },
                        { min: maxValue * 0.4, max: maxValue * 0.5 },
                        { min: maxValue * 0.3, max: maxValue * 0.4 },
                        { min: minValue, max: maxValue * 0.3 },
                    ],
                    // 颜色
                    inRange: {
                        color: ['#73c0de', '#fac858', '#3ba272', '#5470c6', '#fc8452', '#9a60b4', 'red',]
                    },

                },
                title: {
                    text: '全国企业分布',
                    subtext: '更新时间:2024-11-30 01:00:00',
                    top: 10,
                    left: 15,
                    x: 'left',
                    textStyle: {
                        color: '#000'
                    }
                },
                tooltip: {
                    trigger: 'item',
                    showDelay: 0,
                    transitionDuration: 0.2
                },
                tooltip: {},
                series: [
                    {
                        name: '全国轨道交通企业数量（家）',
                        type: 'map',
                        map: 'China',
                        // roam: true,
                        zoom: 1.2,
                        label: {
                            show: true,
                            color: '#fff'
                        },
                        // 全国各省数据
                        data,
                    }
                ]
            }
            myChart.setOption(option)
        }


    }
}
</script>
<style scoped></style>
